<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>

    <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="/statics/css/register.css">
    <!-- 网页icon头像 -->
    <link rel="shortcut icon" href="/statics/img/register.png">

</head>

<body>
    <!-- 整体布局 -->
    <div id="container">
            <!-- 注册框 -->
            <div id="registerBox" class="shadow-lg">
                <!-- 注册表单 -->
                <form id="registerForm" action="/registerDone" method="POST">
                    <!-- 注册整体布局 -->
                    <div id="registerLayout">
                        <div id="titleText">
                            <h3>
                                <p class="text-success">小胖用户注册页面</p>
                            </h3>
                        </div>
                        <div class="form-group">
                            <label for="username">用户名:</label>
                            <input type="text" class="form-control" name="name_username" id="usernameBoxId">
                            <label for="" class="errorHint1 invisible" style="color: red;">请输入用户名</label>
                        </div>
                        <!-- 错误提示 -->
                        <!-- <div class="errorMessage">
                用户名为空或密码为空或两次密码输入不一致
            </div> -->
                        <div class="form-group">
                            <label for="pwd">密码:</label>
                            <input type="password" class="form-control" name="name_pwd" id="pwdBoxId">
                            <label for="" class="errorHint2 invisible" style="color: red;">请输入密码</label>
                        </div>
                        <div class="form-group">
                            <label for="againPwd">确认密码:</label>
                            <input type="password" class="form-control" name="name_againPwd" id="againPwdBoxId">
                            <label for="" class="errorHint3 invisible" style="color: red;">两次密码不一致</label>
                        </div>



                        <div id="loginAndregister">
                            <input type="button" class="btn btn-primary" value="取消" name="" id="loginButton"
                                onclick="cancelJump()">
                            <input type="button" class="btn btn-primary" value="注册" name="" id="registerButton"
                                onclick="registrationRequirements()">
                        </div>
                    </div>
                </form>

            </div>
        </div>

    <script src="/statics/js/jquery-3.6.0.min.js"></script>
    <script src="/statics/js/bootstrap.min.js"></script>
    <script src="/statics/js/SpiderWeb.js"></script>

    <!-- 注册按钮点击判断 -->
    <script>
        function registrationRequirements() {
            var username = $('#usernameBoxId').val().trim() || '';;
            var password = $('#pwdBoxId').val().trim() || '';;
            var againpassword = $('#againPwdBoxId').val().trim() || '';;
            //用户名长度大于0并且密码长度大于0并且密码等于确认密码则提交表单 
            if (username.length > 0 && password.length > 0 && password === againpassword) {
                $('#registerForm').submit();    // 提交表单
            } else if (username.length === 0) {    // 用户名为空
                // $('div').removeClass('errorMessage');    //.removeClass(errorMessage)清除.errorMessage的class的css属性
                fn_errorHint1('请输入用户名');  // 用户名下面的错误提示函数
            } else if (username.length > 10) {
                fn_errorHint1('亲，用户名不能超过10个字符哦')
            } else if (password.length === 0) {
                fn_errorHint2('请输入密码');    // 密码下面的错误提示函数
            } else if (againpassword.length === 0) {
                fn_errorHint3('请再确认一次密码，以防出错');
            } else if (password !== againpassword) {    // 确认密码下面的错误提示函数
                fn_errorHint3('出错了啦，两次密码不一致');
                return false;
            }
        };
        // 用户名下面的错误提示函数
        function fn_errorHint1(errorHint) {
            $('.errorHint1').text(errorHint);
            $('.errorHint1').removeClass('invisible');
            setTimeout(() => {
                $('.errorHint1').addClass('invisible');
            }, 3000);
        }
        // 密码下面的错误提示函数
        function fn_errorHint2(errorHint) {
            $('.errorHint2').text(errorHint);
            $('.errorHint2').removeClass('invisible');
            setTimeout(() => {
                $('.errorHint2').addClass('invisible');
            }, 3000);
        }
        // 确认密码下面的错误提示函数
        function fn_errorHint3(errorHint) {
            $('.errorHint3').text(errorHint);
            $('.errorHint3').removeClass('invisible');
            setTimeout(() => {
                $('.errorHint3').addClass('invisible');
            }, 3000);
        }
    </script>

    <!-- 取消按钮点击效果 -->
    <script>
        function cancelJump() {
            window.location.href = '/'
        };
    </script>
     <!-- 鼠标点击特效  -->
     <!-- <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function($) {
            $("body").click(function(e) {
                var a = new Array("(⌒▽⌒)","(=・ω・=)","(ﾟДﾟ≡ﾟдﾟ)!?","Σ( ￣□￣||)","(▔□▔)/","Σ(ﾟдﾟ;)","(^・ω・^ )","（￣へ￣）","(￣ε(#￣) Σ","ヽ(`Д´)ﾉ","(╯°口°)╯┴—┴","🍕","🍔","🌭","🥞","🍳","🍞","🥐","🍠","🥙","🍤","🥩","🍖","🥂","🥗","🧀","🍱","🍝","🐷","❤","🤣","💕","💖","🌹","💋","🎂","🎉","🎃","🎈","🎀","🎊","🚗","🎄","❤","💕","💞","💓","💗","💖","💘","💝","💟","💌","🍟","🍗","🍿","江呆呆是个憨憨💕💟💌");
                var $i = $("<span></span>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                y = e.pageY;
                $i.css({
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
            });
        });
        </script> -->
</body>


</html>